import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/build_gen/assets.gen.dart';
import 'package:casdon/common/widget/badge_icon.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:tuya_home_sdk_flutter/tuya_home_sdk_flutter.dart';

class CookingDeviceSelectSheet extends StatefulWidget {
  final List<ThingSmartDeviceModel> devices;
  final int selectedIndex;
  final ValueChanged<int>? onSelected;

  const CookingDeviceSelectSheet({
    required this.devices,
    required this.selectedIndex,
    this.onSelected,
  });

  @override
  State<CookingDeviceSelectSheet> createState() => _CookingDeviceSelectState();
}

class _CookingDeviceSelectState extends State<CookingDeviceSelectSheet> {
  int? selectedIndex;

  @override
  void initState() {
    super.initState();
    selectedIndex = widget.selectedIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.6,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      child: Column(
        children: [
          Container(
            width: 40,
            height: 4,
            margin: const EdgeInsets.symmetric(vertical: 12),
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          Text("选择烹饪设备", style: Theme.of(context).textTheme.titleLarge),
          const SizedBox(height: 12),
          Expanded(
            child: ListView.separated(
              padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.w),
              itemCount: widget.devices.length,
              separatorBuilder: (_, __) => SizedBox(height: 10.h),
              itemBuilder: (context, index) {
                final dev = widget.devices[index];
                final selected = selectedIndex == index;

                return GestureDetector(
                  onTap: () {
                    setState(() => selectedIndex = index);
                    widget.onSelected?.call(index);
                    Navigator.pop(context, dev);
                  },
                  child: Stack(
                    children: [
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        height: 66.h,
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        decoration: BoxDecoration(
                          color: selected
                              ? context.customColorThemeNonNull.brand1
                              : Colors.grey[50],
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Row(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(12),
                              child: Image.network(
                                dev.iconUrl,
                                width: 48,
                                height: 48,
                                fit: BoxFit.cover,
                                errorBuilder: (_, __, ___) =>
                                    const Icon(Icons.devices, size: 40),
                              ),
                            ),
                            SizedBox(width: 30.w),
                            Expanded(
                              child: Text(
                                dev.name,
                                style: selected
                                    ? context.textTheme.labelMedium!.copyWith(
                                        color: context.colorScheme.primary,
                                      )
                                    : context.textTheme.bodyMedium!.copyWith(
                                        color: context
                                            .customColorThemeNonNull
                                            .textColor1,
                                      ),
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      ),

                      if (selected)
                        Positioned(
                          top: 0,
                          right: 0,
                          child: BadgeIcon(
                            imagePath: Assets.images.icSelect.path,
                          ),
                        ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
